<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器状态监控</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        h1, h2 {
            text-align: center; /* 标题居中 */
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center; /* 表格内容居中 */
        }
        th {
            background-color: #f2f2f2;
        }
        .data {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>服务器状态监控</h1>

        <!-- 系统状态信息 -->
        <div class="section">
            <h2>系统状态信息</h2>
            <table>
                <tr>
                    <th>指标</th>
                    <th>值</th>
                </tr>
                <tr>
                    <td>CPU 使用率</td>
                    <td class="data" id="cpuUsage">加载中...</td>
                </tr>
                <tr>
                    <td>系统内存总量</td>
                    <td class="data" id="totalMemory">加载中...</td>
                </tr>
                <tr>
                    <td>剩余可用内存占比</td>
                    <td class="data" id="availableMemory">加载中...</td>
                </tr>
                <tr>
                    <td>系统时间</td>
                    <td class="data" id="systemTime">加载中...</td>
                </tr>
                <tr>
                    <td>网络数据发送量</td>
                    <td class="data" id="networkSent">加载中...</td>
                </tr>
                <tr>
                    <td>网络数据接收量</td>
                    <td class="data" id="networkReceived">加载中...</td>
                </tr>
            </table>
        </div>

        <!-- 服务器状态信息 -->
        <div class="section">
            <h2>服务器状态信息</h2>
            <table>
                <tr>
                    <th>指标</th>
                    <th>值</th>
                </tr>
                <tr>
                    <td>当前连接总数量</td>
                    <td class="data" id="totalConnections">加载中...</td>
                </tr>
                <tr>
                    <td>当前线程数量</td>
                    <td class="data" id="totalThreads">加载中...</td>
                </tr>
            </table>
        </div>
    </div>

    <script>
        // 定义一个函数，用于从服务器获取状态信息
        async function fetchStatus() {
            try {
                const response = await fetch('/api/status'); // 假设服务器提供了一个 /api/status 接口
                const data = await response.json();

                // 更新系统状态信息
                document.getElementById('cpuUsage').textContent = data.system.cpuUsage.toFixed(2) + '%';
                document.getElementById('totalMemory').textContent = (data.system.totalMemory / 1024 / 1024).toFixed(2) + ' MB';
                document.getElementById('availableMemory').textContent = data.system.availableMemory.toFixed(2) + '%';
                document.getElementById('systemTime').textContent = new Date(data.system.systemTime).toLocaleString();
                document.getElementById('networkSent').textContent = (data.system.networkSent / 1024).toFixed(2) + ' KB';
                document.getElementById('networkReceived').textContent = (data.system.networkReceived / 1024).toFixed(2) + ' KB';

                // 更新服务器状态信息
                document.getElementById('totalConnections').textContent = data.server.totalConnections;
                document.getElementById('totalThreads').textContent = data.server.totalThreads;
                document.getElementById('connectionsPerThread').textContent = data.server.connectionsPerThread;
            } catch (error) {
                console.error('Failed to fetch status:', error);
            }
        }

        // 每隔 5 秒更新一次状态信息
        setInterval(fetchStatus, 5000);

        // 页面加载完成后立即获取一次状态信息
        fetchStatus();
    </script>
</body>
</html>